<template>
  <xdh-layout :fixed="mLayoutFix" :north="{height: 'auto'}" :style="mLayoutStyle" ref="body">
    <el-row class="charts" slot="north">
      <el-col :span="8" class="chart-block">
        <xdh-echarts :options="chart1"></xdh-echarts>
      </el-col>
      <el-col :span="8" class="chart-block">
        <xdh-echarts :options="chart2"></xdh-echarts>
      </el-col>
      <el-col :span="8" class="chart-block">
        <xdh-echarts :options="chart3"></xdh-echarts>
      </el-col>
    </el-row>
    <xdh-list-panel :load="loadData" :fit="mPanelFit" :state="state" ref="listPanel" :title="'最新消息'" :sizes="pageSizes" :size="20">
      <template slot="tool">
        <el-input placeholder="请输入内容" size="mini" v-model="input5" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </template>
      <template slot-scope="scope">
        <news-item v-for="(item, idx) in state.list" :item="item" :index="(pageInfo.page - 1)* pageInfo.limit + idx+1" :class="{odd: idx%2===1}" :key="idx"></news-item>
      </template>
    </xdh-list-panel>
  </xdh-layout>
</template>
<script>
  import XdhEcharts from '@/widgets/xdh-echarts';
  import XdhLayout from '@/widgets/xdh-layout';
  import XdhListPanel from '@/widgets/xdh-list-panel';
  import NewsItem from '@/components/focusManage/news-item';
  // echart配置引入
  import echart1 from '@/helper/chart-options/focus-chart1';
  import echart2 from '@/helper/chart-options/focus-chart2';
  import echart3 from '@/helper/chart-options/focus-chart3';
  // 处理列表高度自适应，暴露出三个变量, mLayoutFix,mPanelFit,当小于等于1366像素时为true
  // mLayoutStyle当小于1366像素时为 'display:block',不使用flex布局
  import responseStyle from '@/helper/responseStyle';
  // mixin
  import personMixin from '@/base/mixin/person';

  export default {
    mixins: [personMixin, responseStyle],
    components: {
      XdhLayout,
      XdhEcharts,
      XdhListPanel,
      NewsItem
    },
    data() {
      return {
        chart1: echart1,
        chart2: echart2,
        chart3: echart3,
        pageSizes: [20, 50, 100, 500],
        state: {
          total: 0,
          list: []
        },
        pageInfo: {
          page: 1,
          limit: 20
        }
      };
    },
    methods: {
      loadData(page, limit) {
        this.pageInfo.page = page;
        this.pageInfo.limit = limit;
        let query = Object.assign(
          {},
          {
            page: page,
            limit: limit
          }
        );
        return this.fetchPerson(query).then(res => {
          this.state = res;
          if (this.pageSizes[this.pageSizes.length - 1] < this.state.total) {
            this.pageSizes.push(this.state.total);
          }
        });
      }
    }
  };
</script>
<style  type="text/scss" lang="scss">
  .focus-page {
    height: 100%;
    .charts {
      height: 260px;
      border: 1px solid #ccc;
      box-shadow: 1px 1px 3px #ccc;
      margin-bottom: 15px;
      .chart-block {
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
      }
    }
    .odd {
      background-color: #f4f4f4;
    }
  }
</style>